<template>
  <u-navbar
    back-text=""
    title=""
    :background="navBackground"
    back-icon-size="30rpx"
    :is-fixed="true"
    :immersive="true"
    title-color="#fff"
    back-icon-color="#fff"></u-navbar>
  <view class="indexList">
    <img class="bg" src="/pages/objIdentify/static/image/obj-identify/bg.jpg" />

    <view class="title">
      <img class="title-bg" src="/pages/objIdentify/static/image/obj-identify/title.png" />
    </view>

    <scroll-view
      class="list"
      scroll-y="true"
      show-scrollbar="false"
      enable-flex="true"
      lower-threshold="100"
      @scrolltolower="handleScrollToBottom">
      <view class="item" v-for="item in list" :key="item.introduceId" @click="seeObjIdentifyRes(item)">
        <view class="image">
          <img class="item-bg" :src="item.img" />
        </view>
        <view class="name">{{ item.name }}</view>
      </view>
    </scroll-view>

    <view class="button" @click="switchScanItem"></view>
  </view>
</template>

<script>
import { getFireFacilityList } from '@/api/objIdentify'
import uNavbar from '@/components/navbar/index.vue'
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      navBackground: {
        background: 'transparent'
      }
    }
  },
  components: {
    uNavbar
  },
  onLoad() {
    this.getList()
  },
  methods: {
    switchScanItem() {
      uni.navigateTo({
        url: '/pages/objIdentify/objIdentify'
      })
    },
    getList() {
      getFireFacilityList(this.pageNum, this.pageSize)
        .then((res) => {
          if (res.data.code == 200) {
            this.list = this.list.concat(res.data.result.records)
            this.total = res.data.result.total
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    seeObjIdentifyRes(item) {
      uni.navigateTo({
        url: '/pages/objIdentify/objIdentifyRes?curObjId=' + item.introduceId
      })
    },
    handleScrollToBottom() {
      if (this.pageNum * this.pageSize >= this.total) {
        // uni.showToast({
        // 	title: '没有更多数据了',
        // 	icon: 'none',
        // 	duration: 1000
        // });
        setTimeout(() => {
          uni.hideLoading()
        }, 100)
      } else {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        this.pageNum++
        this.getList()
        setTimeout(() => {
          uni.hideLoading()
        }, 500)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.indexList {
  width: 100%;
  height: 100vh;
  position: relative;
  left: 0;
  bottom: 0;

  .bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 54px;
    background-image: url('/pages/objIdentify/static/image/obj-identify/s-btn.png');
    background-size: cover;
  }

  .title {
    width: calc(100% - 50px);
    height: calc(40% - 100px);
    padding: 85px 25px 15px 25px;

    .title-bg {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 40px);
    height: calc(60% - 40px);
    background-color: #e6e6e6; //#F0F2F5
    padding: 20px 20px 20px 20px;
    overflow: auto;
    border-radius: 15px;

    .item:nth-child(odd) {
      margin-right: 14px;
    }

    .item {
      width: calc(50% - 27px);
      height: 35%;
      background-color: #ffffff;
      padding: 10px;
      margin-bottom: 14px;
      border-radius: 8px;

      .image {
        width: 100%;
        height: 90%;

        .item-bg {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        height: 10%;
        text-align: center;
        font-size: 14px;
        color: #000000;
        margin-top: 5px;
        font-weight: 540;
      }
    }
  }
}
</style>
